<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
     <!-- 图表容器 DOM -->
     <div id="container" style="width: 600px;height:400px;"></div>
     <!-- 引入 highcharts.js -->
     <script src="https://code.hcharts.cn/highcharts.js"></script>
     <script>
         // 图表配置
         var options = {
             chart: {
                 type: 'bar'                          //指定图表的类型，默认是折线图（line）
             },
             title: {
                 text: '我的第一个图表'                 // 标题
             },
             xAxis: {
                 categories: ['苹果', '香蕉', '橙子']   // x 轴分类
             },
             yAxis: {
                 title: {
                     text: '吃水果个数'                // y 轴标题
                 }
             },
             series: [{                              // 数据列
                 name: '小明',                        // 数据列名
                 data: [1, 0, 4]                     // 数据
             }, {
                 name: '小红',
                 data: [5, 7, 3]
             }]
         };
         // 图表初始化函数
         var chart = Highcharts.chart('container', options);
     </script>
</body>

</html>